<template>
  <div class="wapper">
    <div class="left"></div>
    <div class="right">
      <div class="box">
        <h2>{{ isPhone?title:'扫码登录' }}</h2>
        <el-form v-if="isPhone" :rules="rules" ref="formRef" :model="form" label-width="auto" class="demo-ruleForm">
          <el-form-item prop="mobile">
            <el-input placeholder="输入手机号" v-model="form.mobile" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="输入密码" type="password" autocomplete="off" show-password />
          </el-form-item>

          <div class="queren">
            <el-checkbox v-model="flag" size="large" />
            <span>用户平台使用协议</span>
          </div>
          <el-form-item>

            <el-button size="large" :disabled="loadingDeng" :loading="loadingDeng" style="width: 100%" type="primary"
              @click="submitForm(formRef)">
              <template #loading>
                <span class="custom-loading">
                  <el-icon class="is-loading"></el-icon>
                  登录中...
                </span>
              </template>
              {{ loadingDeng ? "" : '登录' }}
            </el-button>
          </el-form-item>
        </el-form>
        <div class="erweima" v-else>
          <!-- 二维码 -->
          <Loading v-show="!qrCode123"> </Loading>
          <qrcode-vue v-show="qrCode123" style="height: 250px; width: 250px" :value="qrCode123" size:500></qrcode-vue>
        </div>
        <div class="other" style="margin-top: 20px">
          <el-button @click="() => { isPhone = true, myInterval() }">手机号登录</el-button>
          <el-button @click="() => {
            (isPhone = false), grtErweima();
            myInterval()
          }
            ">
            二维码登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { routerArray } from "@/router/index";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import axios from "@/utils/request.ts";
import QrcodeVue from "qrcode.vue";
import Loading from "@/components/loading.vue";
let qrCodeUrl = ref(null); //二维码实例
let loadingDeng = ref(false) //登录按钮loading
let router = useRouter();
let title = ref("手机号登录");
let flag = ref(false);
let isPhone = ref(true);
const formRef = ref<FormInstance>();
let rules = ref({
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号长度为11位', trigger: 'blur' },
  ],
})

const form = reactive({
  mobile: "13800000002",
  password: "hm#qd@23!",
});
let qrCode123 = ref("");
let timer = false  //是不是有延时器
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  formEl.validate((valid) => {
    if (valid) {
      if (!flag.value) {
        ElMessage({
          message: "请先阅读用户平台使用协议",
          type: "error",
        });
        return;
      }
      loadingDeng.value = true
      axios.post("/sys/login", form).then((res: any) => {
       
        // console.log(res);
        if (res.message == "登录成功") {
          // 存储token
          localStorage.setItem("token", res.data);
          ElMessage({
            message: res.message,
            type: "success",
          });
          // 跳转页面
          router.push("/")
          loadingDeng.value = false
        } else {
          ElMessage({
            message: res.message,
            type: "error",
          });
        }
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

function grtErweima() {
  axios.get(`/sys/qrcodeKey`).then((res) => {
    console.log(res);
    if (res.success) {
      qrCode123.value = res.data;
    }
  });
}

function getStatus() {
  if (qrCode123.value) {
    axios.get(`/sys/qrcodeState`, { params: { qrcode_key: qrCode123.value } }).then(res => {
      console.log(res);

    })
  }
}
function myInterval() {
  if (isPhone.value) {
    clearInterval(timer)
  } else {
    timer = setInterval(() => {
      getStatus();
    }, 3000);
  }

}

onMounted(() => {

});

</script>

<style scoped lang="scss">
.other {
  display: flex;
  justify-content: space-between;

  button {
    width: 180px;
  }
}

.wapper {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 60%;
    height: 100%;
    // background: #000;
    border-radius: 0 100px 0px 0;
    overflow: hidden;
    background-image: url("@/assets/img/login_back.png");
    // 设置图片尺寸
    background-size: cover;
    // 设置图片不重复
    background-repeat: no-repeat;
    // 设置图片位置
    background-position: center;
  }

  .right {
    width: 40%;
    height: 100%;
    // background: #523838;

    .box {
      height: 60%;
      width: 50%;
      margin: 0 auto;
      padding-top: 50px;
      //   background-color: aquamarine;

      margin-top: 100px;
      display: flex;
      justify-content: between;
      align-items: center;
      //   换成竖轴
      flex-direction: column;

      h2 {
        width: 100%;
        font-size: 24px;
        margin: 50px 0;
        font-weight: 600;
        text-align: left;
      }
    }

    .el-form {
      width: 100%;

      .el-input {
        height: 40px;
      }
    }

    .queren {
      width: 100%;
      margin: 30px 0;

      label {
        margin-top: 3px;
      }

      span {
        margin-left: 10px;
      }
    }

    .erweima {
      height: 250px;
      width: 250px;
      // background-color: aquamarine;
    }
  }
}
</style>
